
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>DataSchema.Array</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
/* custom styles for this example */
#demo .output {margin-bottom:1em; padding:10px; border:1px solid #D9D9D9;}
</style>

<!--end custom header content for this example-->

</head>

<body class="yui3-skin-sam  yui-skin-sam">

<h1>DataSchema.Array</h1>

<div class="exampleIntro">
	DataSchema.Array normalizes arbitrary JavaScript array data against a given schema into an object with known properties.
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<form id="demo">
    <h4>Array of objects</h4>
    <h6>Data</h6>
    <pre>
[
    {make:"Chevrolet", model:"Bel Air", year:1957},
    {make:"Dodge", model:"Dart", year:1964},
    {make:"Ford", model:"Mustang", year:1968}
]
    </pre>
    
    <h6>Schema</h6>
    <pre>
{
    resultFields: [{key:"make"}, {key:"model"}, {key:"year"}]
}
    </pre>

    <h6>Normalized data</h6>
    <input type="button" id="demo_apply_objects" value="Apply schema =>">
    <div id="demo_output_objects" class="output"></div>

    <h4>Array of arrays</h4>
    <h6>Data</h6>
    <pre>
[
    ["Chevrolet", "Bel Air", 1957],
    ["Dodge", "Dart", 1964],
    ["Ford", "Mustang", 1968]
]
    </pre>
    
    <h6>Schema</h6>
    <pre>
{
    resultFields: [{key:"make"}, {key:"model"}, {key:"year"}]
}
    </pre>
    
    <h6>Normalized data</h6>
    <input type="button" id="demo_apply_arrays" value="Apply schema =>">
    <div id="demo_output_arrays" class="output"></div>

    <h4>Simple array of primitives</h4>
    <h6>Data</h6>
    <pre>
[
    "1957 Chevrolet Bel Air", "1964 Dodge Dart", "1968 Ford Mustang"
]
    </pre>
    
    <h6>Schema</h6>
    <pre>
{
    resultFields: [{key:"make"}, {key:"model"}, {key:"year"}]
}
    </pre>
    
    <h6>Normalized data</h6>
    <input type="button" id="demo_apply_simple" value="Apply schema =>">
    <div id="demo_output_simple" class="output"></div>
</form>



<script type="text/javascript">
YUI().use("dump", "node", "dataschema-array", function (Y) {
    Y.on("click", function(e){
        var data_in = [{make:"Chevrolet",model:"Bel Air",year:1957},
                {make:"Dodge",model:"Dart",year:1964},
                {make:"Ford",model:"Mustang",year:1968}],
            schema = {
                resultFields: [{key:"make"}, {key:"model"}, {key:"year"}] // Or simply: ["make", "model", "year"]
            };
        Y.one("#demo_output_objects").setContent(Y.dump(Y.DataSchema.Array.apply(schema, data_in)));
    }, "#demo_apply_objects");

    Y.on("click", function(e){
        var data_in = [["Chevrolet", "Bel Air", 1957],
                ["Dodge", "Dart", 1964],
                ["Ford", "Mustang", 1968]],
            schema = {
                resultFields: [{key:"make"}, {key:"model"}, {key:"year"}] // Or simply: ["make", "model", "year"]
            };
        Y.one("#demo_output_arrays").setContent(Y.dump(Y.DataSchema.Array.apply(schema, data_in)));
    }, "#demo_apply_arrays");

    Y.on("click", function(e){
        var data_in = ["1957 Chevrolet Bel Air", "1964 Dodge Dart", "1968 Ford Mustang"],
            schema = {
                resultFields: [{key:"make"}, {key:"model"}, {key:"year"}] // Or simply: ["make", "model", "year"]
            };
        Y.one("#demo_output_simple").setContent(Y.dump(Y.DataSchema.Array.apply(schema, data_in)));
    }, "#demo_apply_simple");
});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
